<template>
  <p :class="$attrs.class">MyComponent! this is a child component</p>
  <span>this is a child component too! {{ size }}</span>
  <!-- <button @click="$emit('changeSize', '13px')">change color</button> -->
  <button @click="changeSize">change color</button>
</template>
<script>
import { ref, reactive} from 'vue'
export default {
  props: {
    size: {
      type: String,
      default: '12px'
    }
  },
  setup(props, {emit}) {
    const size = ref(props.size)
    const changeSize = () => {
      emit('changeSize', '13px')
    }
    return {
      size,
      changeSize
    }
  }
}
</script>
<style>
.active{
  color:blue
}
</style>